<template>
  <div class="content">
    <a-form style="padding: 20px 20px 0">
      <a-form-item label="员工姓名">
        <a-space>
          <a-input placeholder="请输入员工姓名" v-model:value="pages.name" ></a-input>
          <a-button style="border-radius: 4px" type="primary" @click="search" >查询</a-button>
        </a-space>
        <a-divider orientation="left" style="margin-left: -72px; margin-bottom: 0px" />
      </a-form-item>
    </a-form>
    <a-button
      size="mini"
      style="margin-left: 20px; border-radius: 4px"
      type="primary"
      @click="showDialog = true"
      >添加员工</a-button
    >
    <a-table :dataSource="list" :columns="columns" :pagination="false">
      <template #bodyCell="{ record, column, text, index }">
        <a-space v-if="column.dataIndex === 'operate'">
          <a-button style="color: #4770ff; padding: 4px 15px" type="text" @click="edit(record.id)">编辑</a-button>
          <a-button
            style="color: #4770ff; padding: 4px 15px"
            type="text"
            @click="delEmployee(record.id)"
            >删除</a-button
          >
          <a-button style="color: #4770ff; padding: 4px 15px" type="text" @click="reset">重置密码</a-button>
        </a-space>

        <!-- 序号------------ -->
        <template v-if="column.dataIndex === 'number'">
          {{ (pages.page - 1) * pages.pageSize + index + 1 }}
        </template>

        <!-- 状态------------ -->
        <template v-if="column.dataIndex === 'status'">
          {{ text === '0' || !text ? '未启用' : '启用' }}
        </template>
      </template>
    </a-table>
    <!-- 分页---------- -->
    <div class="pagination">
      <a-config-provider :locale="zh_CN">
        <a-pagination
          size="small"
          v-model:current="pages.page"
          v-model:page-size="pages.pageSize"
          :total="total"
          @change="onChange"
          :pageSizeOptions="['10', '20', '30', '40']"
          :show-total="(total) => `共 ${total} 条`"
          show-size-changer
          show-quick-jumper
        />
      </a-config-provider>
    </div>
    <add-employee ref="refForm" @addsuccess="getEmployeeListAPI" v-model:showDialog="showDialog" ></add-employee>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getEmployeeList, deleteEmployee,resetPassword } from '@/api/employee'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { Modal, message } from 'ant-design-vue'
import AddEmployee from '@/views/system/components/add-employee.vue'
let list = ref([]) //列表数据
const showDialog = ref(false) //添加员工弹窗
const columns = [
  {
    title: '序号',
    dataIndex: 'number',
    key: 'number'
  },
  {
    title: '员工姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '登录账号',
    dataIndex: 'userName',
    key: 'userName'
  },
  {
    title: '联系方式',
    dataIndex: 'phonenumber',
    key: 'phonenumber'
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    key: 'roleName'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '添加时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate'
  }
]

const getEmployeeListAPI = async (pages) => {
  const res = await getEmployeeList(pages)
  console.log(res.data.rows)
  list.value = res.data.rows
  total.value = res.data.total
}
onMounted(() => {
  getEmployeeListAPI()
})

const delEmployee = (id) => {
  Modal.confirm({
    content: '删除员工后,该员工账号将无法登录,是否删除？',
    async onOk() {
      await deleteEmployee(id)
      message.success('操作成功')
      getEmployeeListAPI()
    }
  })
}
const reset = (id) => {
  Modal.confirm({
    content: '确定将密码重置为123456吗?',
    async onOk() {
      await resetPassword(id)
      message.success('操作成功')
      getEmployeeListAPI()
    }
  })
}
const pages = ref({
  page: 1,
  pageSize: 10
})
const total = ref(null)

const onChange = (page, pageSize) => {
  pages.value.page = page
  pages.value.pageSize = pageSize
  getEmployeeListAPI(pages.value)
}
const search = () => {
  getEmployeeListAPI(pages.value)
}

const refForm = ref(null)
const edit =  (id) => {
  showDialog.value = true
  refForm.value.getEmployeeDetailAPI(id)
}
</script>
<style lang="scss" scoped>
.ant-layout-content {
  background-color: #f4f6f8;
}
.content {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  margin: 20px 20px 0;
}
.ant-input {
  width: 220px;
  border-radius: 4px;
}
.ant-table-cell {
  padding: 8px !important;
}

.ant-table-content {
  margin: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-right: 50px;
}
</style>
